<template>
  <div id="app">
    日期选择器
    {{value1}}
    <hr>
    <my-date-picker v-model="value1"></my-date-picker>
    <!-- <my-date-range-picker v-model="value2"></my-date-range-picker> -->
    <hr>
    popover
    <div style="margin:100px 0px 0px 100px;">
      <my-popover
      v-model="value3"
      width="200px"
      title="标题"
      content="内容文本123"
      trigger="click"
      placement="top"
    >
      <my-button type="primary" slot="reference">点我弹框</my-button>
    </my-popover>
    </div>
    <hr>
    轮播图
    <div>
      <!-- 高度 是否自动播放 间隔多少秒 从哪张开始 无缝轮播 切换事件 -->
      <my-carousel
        height="200px"
        :autoplay="true"
        :delay="2000"
        :initial-index="0"
        :loop="true"
        @change="change"
      >
        <my-carousel-item>
          <div class="content" style="background:red">内容1</div>
        </my-carousel-item>
        <my-carousel-item>
          <div class="content" style="background:blue">内容2</div>
        </my-carousel-item>
        <my-carousel-item>
          <div class="content" style="background:yellow">内容3</div>
        </my-carousel-item>
      </my-carousel>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
        value1:'',
        value2:[],
        value3:true,
    }
  },
  methods:{
    change(index){
      console.log(index)
    }
  }
}
</script>

<style lang="scss">
.content{
  width:100%;
  height:100%;
}
</style>
